

// 项目脚手架的配置文件 
// entry 入口
// output 出口
// loaders 处理文件 打包文件
// js
// css/scss/less
// png/svg/icon
// vue 
// react 
// html 
const path = require("path")
const htmlWebpackPlugin = require("html-webpack-plugin")   // 处理HTML打包 
const openBrowserWebpackPlugin = require("open-browser-webpack-plugin");  // 自动打开浏览器
const extractTextWebpackPlugin = require("extract-text-webpack-plugin")
const webpack = require("webpack")
module.exports  = {
    entry:["./src/main.js"],
    output:{
      path:path.resolve(__dirname,"dist"),  // 打包文件路径 
      filename:"js/app.[hash:8].js", // 文件路径和名称    hash:8 哈希算法  得到长度为8 随机字符串 避免命名冲突
      publicPath:"" // 打包的相对路径 
    },
    devtool:"source-map",  // 方便在线调试 

    // 别名  @ = src
    resolve:{
      alias:{
        "@":path.resolve("src"),
        "~":path.resolve("src/utils"),
      }
    },
    // 声明对应的模块需要对应的loader 
    module:{
      rules:[
        {
          test:/\.(js|jsx)$/,
          exclude:/node_modules/,
          use:["babel-loader"]
        },
        { 
          test:/\.(jpg|png|svg|gif|jpeg|eot|ttf|woff|woff2)$/,
          exclude:/node_modules/,
          use:[
            {
              loader:"file-loader",
              options:{
                limit:8192,  // 1024KB  8M 
                name:"img/[name].[hash:8].[ext]" ,  //  photo.png=> photo.1234qwer.png
              }
            }
          ]
        },
        // 打包 scss
        {
          test:/\.(css|sass|scss)$/,
          use:extractTextWebpackPlugin.extract({
            fallback:'style-loader',  // 转为style 样式风格的 js 代码
            use:[
              'css-loader', // 转为 commonJS 模块
              {
                loader:"postcss-loader", // 处理css代码 
                options:{
                  plugins:function(){
                    require("cssgrace")    // CSS代码美化
                    require("autoprefixer")  // 兼容样式 自动补全  moz webkit 
                    require("postcss-px2rem")({  // px=>rem 
                      // unitRem:75 
                    })
                  }
                }
              },
              "sass-loader"
            ]
          })
        },

        // 打包 less
        {
          test:/\.(css|less)$/,
          use:extractTextWebpackPlugin.extract({
            fallback:'style-loader',  // 转为style 样式风格的 js 代码
            use:[
              'css-loader', // 转为 commonJS 模块
              {
                loader:"postcss-loader", // 处理css代码 
                options:{
                  plugins:function(){
                    require("cssgrace")    // CSS代码美化
                    require("autoprefixer")  // 兼容样式 自动补全  moz webkit 
                    require("postcss-px2rem")({  // px=>rem 
                      // unitRem:75 
                    })
                  }
                }
              },
              "less-loader"
            ]
          })
        }
      ]
    },

    devServer:{
      contentBase:path.resolve(__dirname,"dist"),   // 开发服务Server  只作用于dist 
      host:"0.0.0.0",
      port:7000,
      inline:true,
      hot:true,
      compress:true,
      // open:true , // 自动打开浏览器
      proxy:{  //代理 
        "/gateway":{
          target:"https://m.maizuo.com/"   
        },
      }
    },
    plugins:[   // webpack 插件配置 
      new htmlWebpackPlugin({
        template:"./public/index.html",  // 需要打包的html 模板
        // filename:"./public/index.html",
        inject:true, // 自动引入打包的css 和 js 
        minify:true, // 是否压缩 
      }),

      new openBrowserWebpackPlugin({
        url:"http://localhost:7000"
      }),

      // 抽离样式 
      new extractTextWebpackPlugin({
        filename:"css/app.[hash:8].css",
        allChunks:true,  // 抽离所有的样式 
        disable:false ,  // 是否禁用 抽离 
      }),

      new webpack.ProvidePlugin({
        React:'React',
        Component:['react',"Component"]
      })
    ]
}